<template>
	<div class="workflow-drawer-node">
		<el-tabs type="border-card" v-model="tabsActive">
			<!-- 节点编辑 -->
			<el-tab-pane label="节点编辑" name="1">
				<el-scrollbar>
					<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="small" label-width="80px" class="pt15 pr15 pb15 pl15">
						<!-- <el-form-item label="节点ID" prop="id">
							<el-input v-model="node.id" placeholder="请输入节点ID" readonly></el-input>
						</el-form-item> -->
						<el-form-item label="节点ID" prop="nodeId">
							<el-input v-model="node.nodeId" placeholder="请输入节点ID" readonly></el-input>
						</el-form-item>
						<el-form-item label="节点类型" prop="type">
							<el-input v-model="node.type" placeholder="请输入节点类型" readonly></el-input>
						</el-form-item>
						<el-form-item label="left坐标" prop="left">
							<el-input v-model="node.left" placeholder="请输入left坐标" readonly></el-input>
						</el-form-item>
						<el-form-item label="top坐标" prop="top">
							<el-input v-model="node.top" placeholder="请输入top坐标" readonly></el-input>
						</el-form-item>
						<el-form-item label="class样式" prop="cssClass">
							<el-input v-model="node.cssClass" placeholder="请输入class样式" readonly></el-input>
						</el-form-item>
						<el-form-item label="icon图标" prop="icon">
							<el-input v-model="node.icon" placeholder="请输入icon图标" readonly></el-input>
						</el-form-item>
						<el-form-item label="节点名称" prop="name">
							<el-input v-model="node.name" placeholder="请输入节点名称" clearable :readonly="node.type == 'start' || node.type == 'end'"></el-input>
						</el-form-item>
						<el-form-item v-if="readonly == false">
							<el-button type="primary" class="mb15" @click="onNodeSubmit" :loading="loading.extend" icon="el-icon-check" size="small">
								保存
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>

			<!-- 数据表单 -->
			<el-tab-pane label="数据表单" name="2" v-if="node.form && node.form.length > 0">
				<el-scrollbar>
					<el-form :model="formData" ref="extendFormRef" size="small" label-width="80px" class="pt15 pr15 pb15 pl15">
						<el-form-item
							:label="val.label"
							:prop="val.prop"
							v-for="(val, key) in node.form"
							:key="key"
							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
						>
							<el-input
								v-model="formData[val.prop]"
								:placeholder="val.placeholder"
								clearable
								:type="val.type === 'textarea' ? 'textarea' : 'text'"
								:rows="val.type === 'textarea' ? val.rows : ''"
								v-if="val.type === 'input' || val.type === 'textarea'"
								:disabled="val.disabled"
							></el-input>
							<el-select v-model="formData[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="readonly == false">
							<el-button class="mb15" @click="onExtendRefresh" icon="el-icon-refresh" size="small">
								重置
							</el-button>
							<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend" icon="el-icon-check" size="small">
								保存
							</el-button>
						</el-form-item>
					</el-form>
					<el-descriptions class="pt15 pr15 pb15 pl15" title="输出参数说明" :column="1" border v-if="node.mark" >
						<el-descriptions-item v-for="(val, key) in node.mark" :key="key" :label="val.label" labelStyle="{'width' : '80px'}">
							<el-tag>{{val.value}}</el-tag>
							<span class="ml15">{{val.remark}}</span>
						</el-descriptions-item>
					</el-descriptions>
				</el-scrollbar>
			</el-tab-pane>
			
			<!-- 节点执行结果 -->
			<el-tab-pane label="执行结果" name="3" v-if="traceId && readonly">
				<el-scrollbar>
					<el-form v-if="nodeResult.id" ref="resultFormRef" :model="nodeResult" size="small" class="pt15 pr15 pb15 pl15">
						<el-row>
							<div class="workable-result-label">执行状态：</div>
							<div class="monitor-operlog-info">
								<span v-if="nodeResult.status" class="color-success">正常</span>
								<span v-else class="color-danger">异常</span>
							</div>
						</el-row>
						<el-divider class="monitor-operlog-divider"></el-divider>
						<el-row>
							<div class="workable-result-label">消息内容：</div>
							<div class="monitor-operlog-info">{{ nodeResult.message }}</div>
						</el-row>
						<el-row v-if="nodeResult.content">
							<json-viewer v-if="contentIsJson" :value="nodeResult.content" :expand-depth="4"></json-viewer>
							<div v-else class="monitor-operlog-info">{{ nodeResult.content }}</div>
						</el-row>
					</el-form>
					<el-form v-else ref="resultFormRef" :model="nodeResult" size="small" class="pt15 pr15 pb15 pl15">
						<el-row>
							<div class="workable-result-label">执行状态：</div>
							<div class="monitor-operlog-info">
								<span class="color-info">未执行</span>
							</div>
						</el-row>
						<el-divider class="monitor-operlog-divider"></el-divider>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>
			
		</el-tabs>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { addWorkableNode, editWorkableNode, getWorkableNode } from '/@/api/workable/node/index';
import { addWorkableForm, editWorkableForm, getWorkableForm } from '/@/api/workable/form/index';
import { getWorkableResult }  from '/@/api/workable/result/index';

// 定义接口来定义对象的类型
interface WorkflowDrawerNodeState {
	node: { [key: string]: any };
	nodeRules: any;
	form: any;
	tabsActive: string;
	loading: {
		extend: boolean;
	};
}

export default defineComponent({
	name: 'workable/editor/drawer/node',
	props: {
		readonly: {
			type: Boolean,
		},
	},
	setup(props, { emit }) {
		const route = useRoute();
		const nodeFormRef = ref();
		const extendFormRef = ref();
		const resultFormRef = ref();
		const state = reactive<WorkflowDrawerNodeState>({
			node: {},
			nodeRules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
			},
			formData: {},
			nodeForm: {},
			tabsActive: '1',
			loading: {
				extend: false,
			},
			traceId: null,
			readonly: false,
			nodeResult: {},
			contentIsJson: false,
		});
		// 获取父组件数据
		const getParentData = (data: object) => {
			state.traceId = route.query.traceId;
			state.readonly = props.readonly;
			state.node = data;
			state.tabsActive = data.form && data.form.length > 0 ? '2' : '1';
			getWorkableNode({id: state.node.id, taskId: state.node.taskId, nodeId: state.node.nodeId}).then(res => {
				if(res.code == 0){
					if(res.data && res.data.id){
						state.node.id = res.data.id;
					}
				}
			});
			if(data.type != 'start' && data.type != 'end'){
				getWorkableForm({taskId: data.taskId, nodeId: data.nodeId}).then(res => {
					if(res.code == 0){
						state.formData = {};
						state.nodeForm = res.data || {};
						if(res.data && res.data.nodeForm){
							try{
								state.formData = JSON.parse(res.data.nodeForm);
							}catch(e){}
						}
					}
				})
			}
			if(state.traceId){
				getWorkableResult({taskId: state.node.taskId, nodeId: state.node.nodeId, traceId: state.traceId}).then(res => {
					if(res.code == 0){
						state.nodeResult = res.data || {};
						state.tabsActive = state.traceId && state.readonly ? '3' : state.tabsActive;
						try {
							state.contentIsJson = false;
							if(state.nodeResult.content){
								state.nodeResult.content = JSON.parse(state.nodeResult.content);
								state.contentIsJson = true;
							}
						} catch(e) {}
					}
				})
			}
		};
		// 节点编辑-保存
		const onNodeSubmit = () => {
			nodeFormRef.value.validate((valid: boolean) => {
				if (valid) {
					state.loading.extend = true;
					if(state.node.id){
						editWorkableNode(state.node).then(res => {
							if(res.code == 0){
								state.loading.extend = false;
								ElMessage.success('保存成功');
								state.node = res.data;
								emit('submit', state.node);
								emit('close');
							}
						})
					}else{
						addWorkableNode(state.node).then(res => {
							if(res.code == 0){
								state.loading.extend = false;
								ElMessage.success('保存成功');
								state.node = res.data;
								emit('submit', state.node);
								emit('close');
							}
						})
					}
				} else {
					return false;
				}
			});
		};
		
		// 扩展表单-重置
		const onExtendRefresh = () => {
			extendFormRef.value.resetFields();
		};
		// 扩展表单-保存
		const onExtendSubmit = () => {
			extendFormRef.value.validate((valid: boolean) => {
				if (valid) {
					state.loading.extend = true;
					let params = {
						id: state.nodeForm.id,
						taskId: state.node.taskId,
						nodeId: state.node.nodeId,
						nodeForm : JSON.stringify(state.formData),
					}
					if(state.nodeForm.id){
						editWorkableForm(params).then(res => {
							if(res.code == 0){
								state.loading.extend = false;
								ElMessage.success('保存成功');
								emit('close');
							}
						})
					}else{
						addWorkableForm(params).then(res => {
							if(res.code == 0){
								state.loading.extend = false;
								ElMessage.success('保存成功');
								emit('close');
							}
						})
					}
				} else {
					return false;
				}
			});
		};
		return {
			nodeFormRef,
			extendFormRef,
			resultFormRef,
			getParentData,
			onNodeSubmit,
			onExtendRefresh,
			onExtendSubmit,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.workflow-drawer-node {
	::v-deep {
		.el-tabs {
			box-shadow: unset;
			border: unset;
			.el-tabs__nav {
				display: flex;
				width: 100%;
				.el-tabs__item {
					flex: 1;
					padding: unset;
					text-align: center;
					&:first-of-type.is-active {
						border-left-color: transparent;
					}
					&:last-of-type.is-active {
						border-right-color: transparent;
					}
				}
			}
			.el-tabs__content {
				padding: 0;
				height: calc(100vh - 90px);
				.el-tab-pane {
					height: 100%;
				}
			}
		}
	}
}
</style>
